import React, { Component } from 'react'
import config from '../../config'
import { initTemplate, searchClick } from '../../events'

import './index.less'
class Table extends Component {
	constructor(props) {
		super(props)
		this.state = {}
	}

	// 组件挂载完成时触发的函数~~~只执行一次
	componentDidMount() {}

	render() {
		let { createTransferTable, that } = this.props
        const multiLang = that.props.MutiInit.getIntl(2011)
        let { getTradeType } = that.props
		return (
			<div className="area-content-main">
				{createTransferTable({
					headTableId: config.orderListArea,//表格组件id
                    bodyTableId: config.bodysArea,//子表模板id
                    fullTableId: config.bodysArea,//主子拉平模板id
					comType: that.state.navTabStatus === '33' ? 'hasCheckBox_child' : '',
					// 点击加号展开，设置表格数据
					transferBtnText: multiLang && multiLang.get('201103INUP-0005'), // 转单按钮显示文字
					showSeletedBtn: that.state.navTabStatus === '33',
					showGenerateBtn: that.state.navTabStatus === '33',
					containerSelector: '#transferInvoiceWallet', // 容器的选择器 必须唯一,用于设置底部已选区域宽度
					showChangeViewBtn: false,
					selectArea: that.selectArea,
					showPagination: true,
					onPageInfoChange: searchClick.bind(that, that.props),
					onTransferBtnClick: ids => {
						// 点击转单按钮钩子函数
						const orderPkList = []
						if (ids && ids.length > 0) {
							ids.forEach(item => {
								orderPkList.push(item.head.pk)
							})
						}

						if (!getTradeType('pk_tradetypeid')) {
							toast({ content: multiLang.get('201103INUP-0030') })
							return
						}
						const tradetype = getTradeType('pk_tradetypeid').value

						const pjdata = {
							orderPkList: orderPkList,
							tradetype: tradetype
						}

						const list = that.props.transferTable.getTransferTableSelectedValue().head || []
						let err = false
						if (list.length > 0) {
							for (let i = 0; i < list.length; i++) {
								const item = list[i]
								if (Number(item.head.head.rows[0].values.bxstatus.value) >= 1) {
									toast({ content: multiLang.get('201103INUP-0031'), color: 'danger' })
									err = true
									break
								}
							}
						}
						if (!err) {
							window.pageTravelOrderToBxClick(pjdata)
						}
					},
					onCheckedChange: (flag, record, index, bodys) => {
						// 全选
						if (Array.isArray(record)) {
							const keys = record.map(itm => itm.pk_ermorder.value)
							keys.forEach(key => {
								if (flag == true) {
									that.orderDeleteList[key] = true
								} else if (flag == false) {
									that.orderDeleteList[key] = false
								}
							})
						} else {
							// 单选条件
							const key = record.pk_ermorder.value
							let child_key = record.pk_ermorder_b && record.pk_ermorder_b.value
							// 勾选子表 -> 全选
							let body_keys = []
							that.orderList.forEach(item => {
								if (item.head.head.rows[0].values.pk_ermorder.value === key) {
									if (item.body) {
										body_keys = item.body.body.rows.map(_itm => {
											if (_itm.values.pk_ermorder_b.value !== child_key) return _itm.values.pk_ermorder_b.value
										})
									}
								}
							})

							// 只勾选兄弟元素，否则计算错误
							body_keys = body_keys.filter(itm => itm && itm)
							if (child_key && body_keys.length > 0 && flag) {
								this.props.transferTable.setTheCheckRows('head', body_keys)
							}
							if (child_key && body_keys.length > 0 && !flag) {
								this.props.transferTable.cancelRowsChecked('head', [key])
							}

							if (flag == true) {
								that.orderDeleteList[key] = true
							} else if (flag == false) {
								that.orderDeleteList[key] = false
							}
						}

						this.setState({ orderDeleteListSelf: that.orderDeleteList })
					},
					onChangeViewClick: () => {
						// 点击切换视图钩子函数
						if (!this.props.meta.getMeta()[config.bodysArea]) {
							initTemplate.call(that, that.props) // 加载主子拉平模板
						}
						this.props.transferTable.changeViewType(this.headTableId)
					},
					onSelectedBtnClick: () => {},
					style: () => {
						return { width: '200px' }
					}
				})}
			</div>
		)
	}
}
export default Table
